<template>
  <!-- 全部评价列表 -->
  <view class="comment">
    <view class="comment-list">
      <view class="list_title">
        <view class="title_left f-s-30"
          >患者评价<text class="f-s-26" style="">（{{ detail.total }}条评价）</text></view
        >
        <view class="title_right">
          <view class="mar-r-10">好评率 {{ detail.favorable }}%</view>
          <!-- <view class="right_icon" @click="navigateTo('/manpregnancy/comment/index')">
            <up-icon name="arrow-right"></up-icon>
          </view> -->
        </view>
      </view>
      <view class="comment-item" v-for="(item, index) in commentList" :key="index">
        <view class="item_top flex-row-between">
          {{ item?.name }}
          <up-rate
            active-color="#FFB300"
            inactive-color="#b2b2b2"
            gutter="2"
            readonly
            :modelValue="item?.scoring"
          ></up-rate>
        </view>
        <view class="item_middle mar-b-20">{{ item?.content }}</view>
        <view class="item_bottom">
          {{ item?.create_time }}
        </view>
      </view>
    </view>
    <h-loading :show="showLoading" :showMore="commentList.length" :title="'到底了~'"></h-loading>
  </view>
</template>

<script setup>
import { ref, nextTick } from 'vue'
import { onLoad, onReachBottom, onReady, onShow } from '@dcloudio/uni-app'
import { getreplyListApi } from '@/api/manpregnancy'

const showLoading = ref(false) // 是否显示加载动画
const commentList = ref([]) // 评论列表
const commentParams = ref({
  page: 1,
  limit: 10,
  doctor_id: '',
})
const detail = ref({
  favorable: 0,
  total: 0,
})
const last_page = ref(1)
// 获取评论列表
async function getCommentList() {
  showLoading.value = true
  const res = await getreplyListApi(commentParams.value)
  commentList.value = commentList.value.concat(...res.data.data)
  last_page.value = res.data.last_page
  showLoading.value = false
  detail.value.favorable = res.data.favorable
  detail.value.total = res.data.total
}
onLoad((options) => {
  if (options.doctor_id) {
    commentParams.value.doctor_id = options.doctor_id
  }
  // if (options.uid) {
  //   commentParams.value.doctor_id = options.uid
  // }
  getCommentList()
})
onReachBottom(() => {
  if (commentParams.value.page < last_page.value) {
    commentParams.value.page += 1
    showLoading.value = true
    getCommentList()
  }
})
</script>
<style>
page {
  background: #f6f6f6;
}
</style>
<style lang="scss" scoped>
.comment {
  padding: 20rpx 24rpx;
}
.list_title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .title_right {
    display: flex;
    align-items: center;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 26rpx;
    color: #666666;
  }
}
.comment-list {
  width: 702rpx;
  background: #ffffff;
  border-radius: 16rpx 16rpx 16rpx 16rpx;
  padding: 20rpx;
}
.comment-item {
  padding-bottom: 20rpx;
  padding-top: 20rpx;
  border-bottom: 1rpx solid #f6f6f6;
  .item_top {
    margin-bottom: 10rpx;
  }
  .item_middle {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 28rpx;
    color: #333333;
  }
  .item_bottom {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 26rpx;
    color: #999999;
  }
}
.comment-item:last-child {
  border-bottom: none;
}
</style>
